<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>示例首页</title>
    <!-- 引入element-ui样式文件，由于文件是在本地的static目录下，而且给static定义为资源目录，href直接以static目录为基准 -->
    <link rel="stylesheet" href="../static/element-ui/index.css">

</head>
<body>
<div id="app" v-cloak>
    <!-- 首页内容 -->
    <label th:text="${name}"></label>
    <br>
    <label th:text="${json.name}"></label>
    <button @click="qryInitData">点击获取数据</button>
    <!-- 在最后引入js -->
    <script type="text/javascript" src="../static/vue/vue.global.prod.js"></script>
    <script type="text/javascript" src="../static/axios/axios.js"></script>
    <script type="text/javascript" src="../static/common/axios.config.js"></script>
</div>


<!-- 还要导入自己的js和css文件 -->
<script>
    new Vue({
        el: '#app',
        data: {},
        methods: {
            qryInitData() {
                var _this = this;
                axios.post("/tree", {}).then(function (response) {
                    // 请求成功后，需要判断一下返回值内填充的状态码
                    if (response.data && response.data.code == 0) {
                        _this.$message({
                            message: response.data.msg,
                            type: 'success'
                        });
                        // 成功，也就是返回值在最外层套了一个节点data，data中的内容才是后台返回的JSON对象
                    }
                })
            }
        },
        created: function () {
            this.qryInitData();
        }
    })

</script>
</body>
</html>
